<template>
    <view>
        <fab
            @callback="callback"
            :pattern="pattern"
            :content="content"
            :horizontal="horizontal"
            :vertical="vertical"
            :direction="direction"
            :buttonIcon="componentData.buttonIcon"
            @trigger="trigger"
        ></fab>
    </view>
</template>

<script>
import fab from '../fab/fab';
export default {
    components: {
        fab
    },
    data() {
        return {
            // pattern: {},
            // content: [],
            // horizontal: '',
            // vertical: '',
            // direction: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object,
            default: () => ({
                fileList: []
            })
        }
    },
    beforeMount() {},
    mounted() {
        console.log('diy-float', this.componentData);
    },
    computed: {
        content(data) {
            let fileList = data.componentData.fileList;
            fileList = fileList || [];
            const contentArr = [];
            fileList.forEach((item, index) => {
                let url = '';

                if (item.pagePath) {
                    url = item.pagePath;
                }

                const active = data.activeIndex === index + 1;

                if (item.isShow === 0) {
                    contentArr.push({
                        iconPath: item.imageUrl,
                        selectedIconPath: item.imageUrl,
                        text: item.title,
                        active: active,
                        url: url,
                        type: 2
                    });
                }
            });
            return contentArr;
        },

        pattern(data) {
            let zIndex = -1;

            if (data.componentData.zIndex) {
                zIndex = data.componentData.zIndex;
            }

            return {
                zIndex: zIndex > 0 ? zIndex : '',
                color: data.componentData.color,
                backgroundColor: data.componentData.backgroundColor,
                buttonColor: data.componentData.buttonColor,
                selectedColor: data.componentData.selectedColor,
                buttonIconColor: data.componentData.buttonIconColor
            };
        },

        direction(data) {
            // horizontal:水平显示，vertical：垂直显示
            if (data.componentData.direction === 1) {
                return 'horizontal';
            }

            return 'vertical';
        },

        vertical(data) {
            // 垂直对齐方式。bottom:下对齐，top：上对齐
            if (data.componentData.vertical === 1) {
                return 'top';
            }

            return 'bottom';
        },

        horizontal(data) {
            // 水平对齐方式。left:左对齐，right：右对齐
            if (data.componentData.position === 1) {
                return 'right';
            }

            return 'left';
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        trigger(e) {
            // wx.navigateTo({
            //   url: this.data.componentData.fileList[e.detail.index].pagePath,
            // })
        }
    }
};
</script>
<style>
@import './diy-float.css';
</style>
